<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义radio</title>
    <style>
        /*单选*/
        .radio_label{
            background:url("radio_unselected.png") repeat;
            background-size:10rem 3rem;
            display: inline-block;
            line-height: 3rem;
            height: 2.8rem;
            width: 10rem;
            text-align:center;
            margin-right:2rem;
            padding: 2px 0px;
        }
        .radio_label_span{
            background-color: white;
        }

        .radio_checked {
            background:url("radio_selected.png") repeat;
            background-size:10rem 3rem;
            display: inline-block;
            line-height: 3rem;
            height: 2.8rem;
            width: 10rem;
            text-align:center;
            margin-right:2rem;
            padding: 2px 0px;
        }

        .radio_dischecked {
            background:url("radio_disabled.png") repeat;
            background-size:10rem 3rem;
            display: inline-block;
            line-height: 2.8rem;
            height: 3rem;
            width: 10rem;
            text-align:center;
            margin-right:2rem;
            padding: 2px 0px;
        }

        .radio_checked_txt {
            color: #3887D0;
        }

        .radio_unchecked_txt {
            color: #333;
        }

        .radio_dischecked_txt {
            color: #999;
        }

        input[type='radio'] {
            display:none;
        }
    </style>
</head>
<script src="../common/lib/js/jquery-3.2.1.min.js"></script>
<script type="application/javascript">
    $(function(){
        // 单选框
        $("input[type='radio']").click(function(){
            $("input[type='radio'][name='"+$(this).attr('name')+"']").parent().removeClass("radio_checked");
            $("input[type='radio'][name='"+$(this).attr('name')+"']").next().removeClass("radio_checked_txt");
            $("input[type='radio'][name='"+$(this).attr('name')+"']").next().addClass("radio_unchecked_txt");
            $(this).parent().addClass("radio_checked");
            $(this).next().removeClass("radio_unchecked_txt");
            $(this).next().addClass("radio_checked_txt");
        });
    });
</script>
<body>
    <label for="newpackprint_radio_1" class="radio_label radio_checked">
        <input type="radio" id="newpackprint_radio_1" name="newpackprint_radio" value="1" checked="checked"/>
        <span class="radio_label_span radio_checked_txt">按钮一</span>
    </label>
    <label for="newpackprint_radio_2" class="radio_label">
        <input type="radio" id="newpackprint_radio_2" name="newpackprint_radio" value="2"/>
        <span class="radio_label_span radio_unchecked_txt">按钮二</span>
    </label>
    <label for="newpackprint_radio_3" class="radio_label radio_dischecked" >
        <input type="radio" id="newpackprint_radio_3" name="newpackprint_radio" value="3" disabled/>
        <span class="radio_label_span radio_dischecked_txt">按钮三</span>
    </label>

</body>
</html>